<template>
  <div class="goods">
    <div v-for=" (item,index) in goodsListInfo" :key="
    index">
      <div class="item-img">
        <img v-lazy="goodsListInfo.length > 0 && item.headUrl" alt="" srcset="">
      </div>

      <ul class="main" v-if="goodsListInfo.length > 0">
        <li v-for="list in item.list">
          <p class="title">{{list.title}}</p>
          <p>{{list.desc}}</p>
          <div class="item">
            <img v-lazy="list.products[0].imgUrl" alt="">
            <img v-lazy="list.products[1].imgUrl" alt="">
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
export default {
  name: 'Goods',
  props: {
    goodsListInfo: {
      type: Array,
      require: true,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
}
</script>
<style scoped lang="scss">
.goods {
  background-color: #f6f6f6;
  padding-bottom: 50px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
    li {
      width: 187px;
      height: 135px;
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      p {
        color: #f63515;
        font-size: 12px;
        margin-bottom: 5px;
      }
      .title {
        color: #333;
        font-size: 18px;
      }

      .item {
        display: flex;
        justify-content: space-around;
        img {
          width: 65px;
          height: 65px;
        }
      }
    }
  }
}
</style>
